<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>新单位登记-内蒙古职工互助保障业务系统</title>
    <link rel="shortcut icon" href="/unit/resource/img/favicon.ico">
</head>
<body>

<div class="page">
    <th:block th:include="include :: unLoginTop"/>

    <div class="center">
        <div class="page-content" style="min-height: 636px;">
            <form class="page-form page-register layui-form">
                <!-- 企业注册默认待审核 -->
                <input type="hidden" name="status" value="0"/>

                <div class="page-form-title">新单位登记</div>
                <div class="page-form-item">
                    <div class="page-form-label">单位分类：</div>
                    <select name="categoryID" class="easyui-combotree" style="width:300px;"
                            data-options="url:'${ctxFront}/hzunit/category/categoryFront/easyuiTreeData?addnode=1'">
                    </select>
                    <span style="color:#FF0000;margin-left:10px;">*</span>
                </div>
                <div class="page-form-item">
                    <div class="page-form-label">所属机构：</div>
                    <select name="organizeID" class="easyui-combotree" required style="width:300px;"
                            data-options="url:'${ctxFront}/sys/officeFront/easyuiTreeData?type=1&addnode=1'">
                    </select>
                    <span style="color:#FF0000;margin-left:10px;">*</span>
                    <div class="page-form-placeholder">请选择单位业务办理机构</div>
                </div>
                <div class="page-form-item">
                    <div class="page-form-label">证件正本：</div>
                    <div class="page-form-input">
                        <div class="claim-apply-file-list unit-upload-file-class">
                            <!-- 存放上传的文件 -->
                        </div>
                        <a class="claim-apply-file-upload-btn" title="点此上传资料">
                            <i class="fa fa-plus"></i>
                            <span>上传文件</span>
                        </a>
                        <!-- <span style="color:#FF0000;margin-left:10px;">*</span> -->
                        <div class="page-form-placeholder">请上传相关组织机构代码证<span style="color:red;">正本</span>复印件，建议使用扫描仪扫描为jpg图片上传。如无扫描仪，可直接使用手机拍照上传，手机拍照必须保证内容清晰可见<span
                                id="lose"></span></div>
                    </div>
                    <input type="file" id="unit-upload-file"
                           style="filter:alpha(opacity=0);opacity:0;width: 0;height: 0;"
                           accept="image/png, image/jpeg, image/jpg"/>
                </div>
                <div class="page-form-item">
                    <div class="page-form-label">单位名称：</div>
                    <div class="page-form-input">
                        <input type="text" style="width:260px" name="name" id="name" required
                               lay-verify="required|unitLength">
                        <span style="color:#FF0000;margin-left:10px;">*</span>
                        <div class="page-form-placeholder">请填写单位完整名称，不能是简写，以组织机构代码证名称为准</div>
                    </div>
                </div>
                <div class="page-form-item">
                    <div class="page-form-label">机构代码：</div>
                    <div class="page-form-input">
                        <input type="text" style="width:150px" name="organization" id="organization" required
                               lay-verify="required|isCreditCode">
                        <span style="color:#FF0000;margin-left:10px;">*</span>
                        <div class="page-form-placeholder">
                            统一社会信用代码，如无可以填写上级主管单位的代码证号再加上编号，如：上级单位号码为：123456789，则填写123456789-1，后面加上-1。
                        </div>
                    </div>
                </div>
                <div class="page-form-item">
                    <div class="page-form-label">经办人：</div>
                    <div class="page-form-input">
                        <input type="text" style="width:80px" name="contact" id="contact" required
                               lay-verify="required|contactLength">
                        <span style="color:#FF0000;margin-left:10px;">*</span>
                    </div>
                </div>
                <div class="page-form-item">
                    <div class="page-form-label">联系手机：</div>
                    <div class="page-form-input">
                        <input type="text" style="width:150px" name="mobile" id="mobile" required
                               lay-verify="required|phone">
                        <span style="color:#FF0000;margin-left:10px;">*</span>
                    </div>
                </div>
                <div class="page-form-item">
                    <div class="page-form-label">联系电话：</div>
                    <div class="page-form-input">
                        <input type="text" style="width:150px" name="phone" id="phone" lay-verify="isPhone">
                    </div>
                </div>
                <div class="page-form-item">
                    <div class="page-form-label">联系邮箱：</div>
                    <div class="page-form-input">
                        <input type="text" style="width:150px" name="email" id="email" required
                               lay-verify="required|email">
                        <span style="color:#FF0000;margin-left:10px;">*</span>
                    </div>
                </div>
                <div class="page-form-item">
                    <div class="page-form-label">所在区域：</div>
                    <div class="page-form-input">
                        <div style="position: relative; width:300px;height:30px;"><!-- container -->
                            <input id="regionidName" name="regionidName" type="text" data-toggle="city-picker"
                                   lay-verify="required|regionidName">
                        </div>
                    </div>
                    <span style="color:#FF0000;margin-left:10px;">*</span>
                </div>
                <div class="page-form-item">
                    <div class="page-form-label">详细地址：</div>
                    <div class="page-form-input">
                        <input type="text" style="width:300px" name="address" id="address" required
                               lay-verify="required|addressLength">
                        <span style="color:#FF0000;margin-left:10px;">*</span>
                    </div>
                </div>

                <div class="page-form-item">
                    <div class="page-form-label"></div>
                    <div class="page-form-input">
                        <a class="layui-btn layui-btn-register" lay-submit="" lay-filter="formDemo">立即登记</a>
                        <a class="layui-btn layui-btn-primary" href="${ctxFront}/hzunit/unit/loginIndex">返回登录</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <th:block th:include="include :: footer"/>
</div>

<script>


    //表单初始化
    layui.use(['layer', 'form', 'upload'], function () {
        var form = layui.form;
        var layer = layui.layer;

        //表单提交
        form.on('submit(formDemo)', function (data) {
            $.ajax({
                url: "${ctxFront}/hzunit/unit/Unit/RegisterSubmit",
                data: $(".page-register").serialize(),
                success: function (data) {
                    if (data.success) {
                        layer.msg(data.msg);
                        setTimeout(function () {
                            window.location.reload();
                        }, 2000);
                    } else {
                        layer.msg(data.msg);
                    }
                }
            });
        });

        form.verify({
            unitLength: function (value, item) {
                if (value.length > 200) {
                    return '单位名称超过最大长度';
                }
            }
            , isCreditCode: function (value, item) {
                if (!new RegExp("[1-9A-GY]{1}[1239]{1}[1-9]{1}[0-9]{5}[0-9A-Z]{10}").test(value)) {
                    return '统一社会信用代码填写错误2';
                }
            }
            , contactLength: function (value, item) {
                if (value.length > 20) {
                    return '经办人超过最大长度';
                }
            }
            , phone: function (value, item) {
                if (!new RegExp("(^0\\d{2,3}-\\d{7,8}$)|(^1(3|4|5|7|8)\\d{9}$)").test(value)) {
                    return '联系电话填写错误';
                }
            }
            , addressLength: function (value, item) {
                if (value.length > 500) {
                    return '详细地址超过最大长度'
                }
            },
            regionidName: function (value, item) {
                var reg = new Array();
                var regionidName = value;
                if (regionidName != null && regionidName != '') {
                    reg = regionidName.split('/');
                }
                if (reg.length < 3) {
                    return '所在区域必须选择到区县级';
                }
            }

        });
    });

    //上传按钮
    $(".claim-apply-file-upload-btn").click(function () {
        $("#unit-upload-file").trigger("click");
    });

    // 上传证件正本
    $("#unit-upload-file").change(function () {
        var form = new FormData();
        var File = $("#unit-upload-file")[0].files[0]
        form.append("file", File);
        var size = File.size / 1024;
        if (size > 5 * 1024) {
            layer.msg("图片不能超过5M，请重新选择!");
            return false;
        }
        if (!File.type.match(/image.*/)) {
            layer.msg('请选择正确的图片!')
            return false;
        }
        var idx = layer.load(0);
        $.ajax({
            type: "post",
            url: "/tag/unitFileUpload",
            data: form,
            dataType: "json",
            processData: false,
            contentType: false,
            success: function (data) {
                layer.close(idx);
                if (data.success) {
                    // 删除原文件
                    var delFileUrl = $("#fileImg").attr("data-id");
                    $.soon.ajax({
                        url: "/tag/delUnitFile?delFileUrl=" + delFileUrl,
                        success: function (data) {

                        }
                    });
                    $('.unit-upload-file-class').empty();
                    // 显示图片
                    var html = '<div class="claim-apply-file-item">';
                    html += '	<img id="fileImg" data-id="' + data.body.hzUnit.delFileUrl + '" src="' + data.body.hzUnit.organizationFile + '" />';
                    html += '	<a class="claim-apply-file-btn layui-btn layui-btn-sm" target="_blank" href="${ctxFront}/hzunit/unit/viewUnitImages?fileurl=' + data.body.hzUnit.organizationFile + '">查看</a>';
                    html += '	<a class="claim-apply-file-btn layui-btn layui-btn-primary layui-btn-sm" data-id="' + data.body.hzUnit.delFileUrl + '" onclick="delFile(this)">删除</a>';
                    html += '	<input type="hidden" name="organizationFile" value="' + data.body.hzUnit.organizationFile + '" />';
                    html += '	<input type="hidden" name="delFileUrl" value="' + data.body.hzUnit.delFileUrl + '" />';
                    html += '</div>';
                    $(".unit-upload-file-class").append(html);
                    var organization = data.body.organization;
                    if (organization != null && organization != '' && organization != '无') {
                        $("#organization").val(organization);
                    }
                    var name = data.body.unitName;
                    if (name != null && name != '' && name != '无') {
                        $("#name").val(name);
                    }
                } else {
                    layer.msg(data.msg);
                }
            }, error: function () {
                layer.close(idx);
                layer.msg("数据提交失败");
            }
        });
    });

    /* 查看图片 */
    function openImg(fileurl) {
        layer.open({
            title: "证件正本",
            area: ['60%', '90%'],
            content: "<div style='text-align:center;width: 95%;height: 95%;display: table-cell;vertical-align: middle;'><img style='width: 90%;' src='" + fileurl + "'></div>",
        });
    }

    // 删除证件正本
    function delFile(tag) {
        var delFileUrl = $(tag).attr("data-id");
        layer.confirm('确实要删除资料吗？', {
            btn: ['删除', '取消']
        }, function () {
            $.soon.ajax({
                url: "/tag/delUnitFile?delFileUrl=" + delFileUrl,
                success: function (data) {
                    if (data.success) {
                        layer.msg("删除成功");
                        $(tag).parent().remove();
                    } else {
                        layer.msg("删除成功");
                    }
                }
            });
        });
    }

    //区域赋值
    $(function () {
        $("#regionidName").citypicker();
        $("#regionidName").citypicker("reset");
        $("#regionidName").citypicker("destroy");
        var reg = new Array();
        reg[0] = '内蒙古自治区';
        $("#regionidName").citypicker({
            province: reg[0],
            city: reg.length > 1 ? reg[1] : '',
            district: reg.length > 2 ? reg[2] : ''
        });

    });
</script>

</body>
</html>